<template>
<div class="home">
<top></top>
<Navigation></Navigation>

<!-- 容器 -->
    <div class="container">
      <!-- 注册盒子 -->
      <div class="register-box">
        <!-- 主题内容 -->
        <div class="main">
          <!-- 标题 -->
          <div class="title">
            <p>成为有赞云开发者，共享千万商机</p>
            <p>你只需提供你所擅长的能力，而我们全心全意帮助开发者成功</p>
          </div>
          <!-- 注册 -->
          <div class="register">
            <input type="text" placeholder="填写你的邮箱进行注册" class="register-input" />
            <!-- 注册按钮 -->
            <el-button>注册</el-button>
          </div>
          <div class="tip">注册成为有赞云开发者，获得免费测试资源</div>
          <div class="main-img">
            <div class="img-l">
              <img src="../../assets/img/bannerimg-l.png" alt="" />
            </div>
            <div class="img-c">
              <img src="../../assets/img/bannerimg-c.png" alt="" />
            </div>
            <div class="img-r">
              <img src="../../assets/img/bannerimg-r.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 第二板块 -->
      <div class="plate-two">
        <!-- 第二板块标题 -->
        <div class="plate-two-title">基于有赞开放能力，对接商家多样化需求</div>
        <!-- 第二板块内容 -->
        <div class="plate-two-content">
          <!-- 内容列表 -->
          <div class="plate-two-list" v-for="item in ability" :key="item.index">
            <img :src="item.img" alt="">
            <!-- 列表标题 -->
            <div class="list-title">{{item.title}}</div>
            <!-- 列表提示 -->
            <div class="list-tip">{{item.tip}}</div>
            <div class="list-tip">{{item.wodr}}</div>
            <a href="">{{item.link}}</a>
          </div>
        </div>
      </div>
      <!-- 第三板块 -->
      <div class="plate-three">
        <!-- 第三板块标题 -->
        <div class="plate-title">
          成为有赞云开发者，获得开发者专属权益
        </div>
        <!-- 第三板块内容 -->
        <div class="plate-three-content">
          <!-- 第三板块列表 -->
          <div class="plate-three-list" v-for="item in equity" :key="item.id">
            <img :src="item.img" alt="">
            <div class="list-title">{{item.title}}</div>
            <div class="list-tip">{{item.tip}}</div>
          </div>
        </div>
      </div>
      <!-- 第四板块 -->
      <div class="plate-four">
        <div class="plate-four-title">
          使用我们强大的 API 和有赞云六大业务云产品
        </div>
        <!-- 第四板块内容 -->
        <div class="plate-four-content">
          <!-- 第四板块列表 -->
          <div class="plate-four-list" v-for="item in product" :key="item.id">
            <img :src="item.img" alt="">
            <!-- 列表标题 -->
            <div class="list-title">{{item.title}}</div>
            <!-- 列表提示 -->
            <div class="list-tip">{{item.tip}}</div>
            <!-- 列表链接 -->
            <a href="">{{item.link}}</a>
          </div>
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="rotation">
        <!-- 轮播图标题 -->
        <div class="rotation-title">
          他们为何选择有赞云
        </div>
        <!-- 轮播图内容 -->
        <div class="rotation-content">
          <el-carousel arrow="never">
            <el-carousel-item v-for="item in rotation" :key="item.index">
              <!-- 滚动内容 -->
              <div class="roll-content">
                <!-- 滚动左侧 -->
                <div class="content-l">
                  <img :src="item.img" alt="">
                </div>
                <!-- 滚动右侧 -->
                <div class="content-r">
                  <div class="content-title">{{item.title}}</div>
                  <div class="content-tip">{{item.tip}}</div>
                  <div class="content-wodr">
                    <div class="notes">提示：</div>
                    <div class="wodr">{{item.wodr}}</div>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!-- 合作模块 -->
      <div class="cooperation">
        <div class="cooperation-title">
          更多有赞合作伙伴
        </div>
        <img src="../../assets/img/logos@2x.png" alt="">
      </div>
      <!-- 立即注册 -->
      <div class="immediately-register">
        <div class="title">现在注册，开启新的可能</div>
        <el-button @click="register">立即注册</el-button>
      </div>
    </div>
<Bottom></Bottom>
</div>
</template>
<script>
import top from '@/components/firstTop/index.vue';
import Navigation from '@/components/navigation/homenavigation.vue';
import Bottom from '@/components/bottom/index.vue';

export default {
  data () {
    return {
      // 注册输入框
      input: '',
      // 第二板块
      ability: [
        {
          img: require('../../assets/img/kfpt.png'),
          title: '新人学习',
          tip: '观看有赞云学习视频和对接教程',
          wodr: '立即玩转有赞云开发',
          link: '进入有赞云学习中心'
        },
        {
          img: require('../../assets/img/yykf.png'),
          title: '应用开发',
          tip: '创建标准化应用',
          wodr: '在有赞云应用市场获得销售收入',
          link: '看看其他人做什么'
        },
        {
          img: require('../../assets/img/dzkf_sdk.png'),
          title: '定制开发',
          tip: '自主开发或与客户合作',
          wodr: '帮助他们解决个性化需求',
          link: '进入控制台'
        }
      ],
      // 第三板块
      equity: [
        {
          img: require('../../assets/img/main3-1.png'),
          title: '有赞云应用市场收益',
          tip: 'TOP10开发者的预计平均年收入120W+'
        },
        {
          img: require('../../assets/img/main3-2.png'),
          title: '有赞官方技术背书',
          tip: '与有赞合作，打造深入行业的技术影响力+'
        },
        {
          img: require('../../assets/img/main3-3.png'),
          title: '开发全链路技术支持',
          tip: '全程技术服务，帮助入驻开发者完成开发'
        }
      ],
      // 第四板块
      product: [
        {
          img: require('../../assets/img/bzapi.png'),
          title: '标准API',
          tip: '通过有赞云开放的标准化API，可为有赞商家迅速搭建标准化场景应用，比如订单发货，商品管理，营销插件等',
          link: '了解开发api'
        },
        {
          img: require('../../assets/img/wydz.png'),
          title: '页面定制',
          tip: '开发者可随意开发个性化的前端页面，满足买家不同场景不同行业的购物体验，比如票务，景区，酒店等页面定制',
          link: '了解有赞云定制能力'
        },
        {
          img: require('../../assets/img/kzd.png'),
          title: '扩展点应用',
          tip: '使用有赞云的扩展点和云容器 ，开发者可以自由嵌入自定义流程节点，构建全新的业务逻辑',
          link: '了解有赞云扩展点'
        },
        {
          img: require('../../assets/img/kzdbf.png'),
          title: '标准API',
          tip: '通过有赞云开放的标准化API，可为有赞商家迅速搭建标准化场景应用，比如订单发货，商品管理，营销插件等'
        }
      ],
      // 轮播图
      rotation: [
        {
          img: require('../../assets/img/logo.png'),
          title: '神码浮云',
          tip: '“有赞云扶植开发者成长并盈利，我们收入的50%来自有赞应用市场”',
          wodr: '神码浮云于2016年入驻有赞云，获得过有赞2017年度优秀合作伙伴。旗下的营销应用平台已累计服务2万+的客户，同时为多家知名品牌提供了个性化定制服务。有赞云开放的能力让神码可做的解决方案、产品形态更丰富，而通过有赞应用市场获得的稳定客源，帮助神码这支创业团队持续盈利。'
        }, {
          img: require('../../assets/img/WechatIMG.jpeg'),
          title: '敏行网络',
          tip: '“有赞云强大的开放能力，能够让开发者迅速上手，降低定制开发成本”',
          wodr: '杭州敏行网络科技有限公司成立于2016年，核心团队深耕电商行业信息化十年以上。作为最早入住有赞云的ISV合作伙伴，敏行团队熟练掌握有赞云的核心能力，并据此完成了多个项目的定制服务。'
        }, {
          img: require('../../assets/img/qumaipiao.jpeg'),
          title: '去买票',
          tip: '“通过有赞云，垂直行业解决方案服务商可以结合有赞微商城强大的营销能力和商机，为客户迅速落地一整套解决方案”',
          wodr: '广东去买票科技股份有限公司是一家专门从事智慧票务的技术和服务解决方案公司。通过搭载有赞微商城，去买票为客户提供了一整套线上线下SAAS化剧院票务选座方案，支持场馆类型多样化、选座设置、场次设置、核销设置、售票设置等，后台包含门票销售管理模块、剧院运营管理、领导决策分析模块。'
        }
      ]
    };
  },
  components: {
    Bottom, Navigation, top
  },
  methods: {
    register () {
      this.$router.push('/registered')
    }
  }
}
</script>

<style lang="less" scoped>

.lj {
  a {
    margin: 50px;
  }
}
// 容器
.container {
  // 注册盒子
  .register-box {
    height: 658px;
    background-color: #172031;
    padding-top: 170px;
    box-sizing: border-box;

    // 主体内容
    .main {
      position: relative;
      text-align: center;

      // 标题
      .title {
        color: #fff;
        font-size: 45px;
        text-align: center;

        p:last-of-type {
          font-size: 22px;
          color: #969799;
          margin: 20px 0;
        }
      }

      // 注册
      .register {

        // 注册输入框
        .register-input {
          width: 270px;
          height: 20px;
          border: 0;
          border-radius: 2px;
          color: #000;
          padding: 10px;
        }

        // 注册按钮
        .el-button {
          padding: 0;
          width: 100px;
          height: 40px;
          padding: 0 12px;
          border-radius: 2px;
          margin-left: 13px;
          color: #fff;
          background-color: #398fff;
          border: #398fff;
        }
      }

      // 提示
      .tip {
        font-size: 14px;
        color: #969799;
        margin-top: 20px;
      }

      // 图片
      .main-img {
        display: flex;
        justify-content: space-evenly;
        align-items: flex-end;
      }
    }
  }

  // 第二板块
  .plate-two {
    padding: 60px 0;
    text-align: center;

    // 第二板块标题
    .plate-two-title {
      font-size: 24px;
      margin-bottom: 45px;
    }

    // 第二板块内容
    .plate-two-content {
      display: flex;
      justify-content: center;
      // 第二板块列表
      .plate-two-list {
        width: 309px;
        height: 273px;
        img {
          width: 100px;
          height: 100px;
          margin: 20px 0;
        }
        // 列表标题
        .list-title {
          line-height: 22px;
        }
        // 列表提示
        .list-tip {
          font-size: 14px;
          line-height: 22px;
          color: #7d7e80;
          margin: 10px;
        }
        // 列表链接
        a {
          font-size: 14px;
          color: #08f;
        }
      }
      .plate-two-list:nth-child(2) {
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
      }
    }
  }
  // 第三板块
  .plate-three {
    padding: 60px 0;
    background-color: #172031;
    text-align: center;
    // 第三板块标题
    .plate-title {
      font-size: 26px;
      color: #fff;
      margin-bottom: 45px;
    }
    // 第三板块内容
    .plate-three-content {
      display: flex;
      justify-content: space-evenly;
      // 第三板块列表
      .plate-three-list{
        text-align: center;
        // 第三板块图片
        img {
          margin: 10px 0;
        }
        // 第三板块标题
        .list-title {
          font-size: 22px;
          line-height: 30px;
          color: #fff;
        }
        // 第三板块提示
        .list-tip {
          width: 230px;
          font-size: 16px;
          color: #969799;
          margin: 10px auto;
        }
      }
    }
  }
  // 第四板块
  .plate-four {
    padding: 60px 0;
    // 第四板块标题
    .plate-four-title {
      font-size: 24px;
      margin-bottom: 45px;
    }
    // 第四板块内容
    .plate-four-content {
      display: flex;
      justify-content: center;
      // 第四板块列表
      .plate-four-list {
        position: relative;
        width: 251px;
        height: 284px;
        padding: 15px;
        border: 1px solid #ebedf0;
        box-sizing: border-box;
        margin-right: 15px;
        // 第四板块列表图片
        img {
          width: 48px;
          height: 48px;
          margin: 10px auto;
        }
        // 列表标题
        .list-title {
          margin: 15px;
        }
        // 列表提示
        .list-tip {
          font-size: 14px;
          font-weight: 300;
          color: #969799;
          text-align: left;
          margin: 20px auto;
        }
        // 列表链接
        a {
          position: absolute;
          width: 100%;
          left: 50%;
          transform: translate(-50%);
          bottom: 30px;
          font-size: 14px;
          color: #08f;
        }
      }
      .plate-four-list:last-of-type {
        margin-right: 0;
      }
    }
  }
  // 轮播图
  .rotation {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 490px;
    background-color: #031e53;
    // 轮播图标题
    .rotation-title {
      color: #fff;
      font-size: 26px;
    }
    // 轮播图内容
    .rotation-content {
      color: #000;
      // 轮播图滚动内容
      .roll-content {
        display: flex;
        width: 900px;
        height: 150px;
        margin: auto;
        padding: 30px;
        color: #FFF;
        background-color: rgba(8,11,27,.3);
        // 轮播图滚动内容左侧
        .content-l {
          margin-left: 20px;
          img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
          }
        }
        // 轮播图滚动内容右侧
        .content-r {
          margin-left: 30px;
          text-align: left;
          // 右侧提示
          .content-tip {
            margin: 10px 0;
          }
          // 右侧文档
          .content-wodr {
            display: flex;
            font-size: 14px;
            .notes {
              float: left;
              width: 50px;
            }
            .wodr {
              flex: 1;
            }
          }
        }
      }
      .el-carousel__item.is-active {
        z-index: 0;
      }
      /deep/.el-carousel__indicators--horizontal {
        bottom: 50px;
      }
      /deep/.el-carousel__button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin: 0px 10px;
      }
    }
  }
  // 合作模块
  .cooperation {
    padding: 60px;
    // 合作模块标题
    .cooperation-title {
      font-size: 26px;
      margin-bottom: 45px;
    }
    img {
      margin: 20px auto;
      width: 642px;
      height: 115px;
      }
  }
  // 立即注册
  .immediately-register {
    padding: 60px;
    background-color: #172031;
    .title {
      font-size: 26px;
      color: #fff;
      margin-bottom: 45px;
    }
    .el-button {
      width: 140px;
      border-radius: 2px;
      color: #000;
    }
    .el-button:hover {
      background-color: #fff;
    }
  }
}
</style>
